<template>
  <div>
    <ul class="content" id="content">
      <li class="msgContent conleft">
        <p class="chatname chatleft">
          张虎-客服咨询 {{d | timeTo(1)}}
        </p>
        <ul style="list-style: none;">
          <li class="msgContent left">
            hello?
          </li>
        </ul>
      </li>
      <div style="clear:both">
      </div>
      <li class="msgContent conright">
        <p class="chatname chatright">
          我 {{d | timeTo(1)}}
        </p>
        <ul style="list-style: none;">
          <li class="msgContent right">
            hi
          </li>
        </ul>
      </li>
      <div style="clear:both">
      </div>

    </ul>
    <el-upload :on-preview="handlePreview" action="https://jsonplaceholder.typicode.com/posts/" class="upload-demo" multiple="">
      <el-button size="small" style="margin:8px 0 8px 16px;width: 120px;">
        发送图片
      </el-button>
    </el-upload>
    <textarea class="msgInput" id="msg_input" placeholder="大家都这么说" title="456">
    </textarea>
    <el-row>
      <el-button size="small" @click="sedMsg" style="float: right;margin:8px 18px 0 0;width: 120px;">
        发送
      </el-button>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      d: ""
      // date:new Date(Date.now()),
    };
  },

  methods: {
    sedMsg() {
      if (this.addMsg === "") return;
      this.$socket.emit("sedMsg", this.addMsg);
      this.CHAT.msgArr.push({
        uphone: "mine",
        msg: this.addMsg
      });
      this.$nextTick(() => {
        document.getElementById("myData").scrollTop = document.getElementById(
          "myData"
        ).scrollHeight;
      });
      this.addMsg = "";
    },
    handlePreview(file) {
      console.log(file);
    },
    date() {
      this.d = Date.parse(new Date()) / 1000;
    }
  },
  mounted() {
    this.date();
    // window.open(
    //   "//wpa.qq.com/msgrd?v=3&uin=2168344459&site=qq&menu=yes",
    //   "_target"
    // );
  }
};
</script>
<style>
.main {
  position: relative;
  margin: 0 auto;
  border: 1px solid #888;
  width: 100%;
  height: 720px;
}
.msgInput {
  display: block;
  width: 98%;
  height: 128px;
  margin: 5px auto;
  resize: none;
}
.content {
  list-style: none;
  width: 98%;
  height: 470px;
  margin: 5px auto;
  border: 1px dotted #d1d3d6;
  overflow-y: scroll;
  padding: 0;
}
.msgContent {
  width: auto;
  max-width: 250px;
  height: auto;
  word-break: break-all;
  margin: 5px;
  padding: 3px;
  border-radius: 5px;
}

.content .left {
  float: left;
  text-align: left;
  background-color: lightgrey;
  position: relative;
  left: -40px;
}
.content .right {
  float: right;
  text-align: right;
  background-color: yellowgreen;
}
.conright {
  float: right;
}
.chatname {
  margin: 0;
}
.chatleft {
  color: blue;
  text-align: left;
}
.chatright {
  float: right;
}
</style>